<template>
  <div class="select">
    <!-- 下拉列表 -->
    <el-row>
      <el-col :span="6">
        <el-select v-model="value1" placeholder="请下拉">
          <el-option
            v-for="item in options" 
            :key="item.value"
            :label="item.label"
            :value="item.value"> <!-- v-for:列表渲染 /label,只是为了显示/value是发送值 -->
          </el-option>
        </el-select>
      </el-col>

      <!-- 禁用某一个 -->
      <el-col :span="6">
        <el-select v-model="value2" placeholder="请下拉">
          <el-option
            v-for="item in options" 
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.value=='选项2'"> <!-- disabled:禁用某一项 -->
          </el-option>
        </el-select>
      </el-col>

      <!-- 清空选择和多选项目 -->
      <el-col :span="6">
        <el-select v-model="value2" placeholder="请下拉" clearable multiple > <!-- clearable:清空 / multiple：多选 -->
          <el-option
            v-for="item in options" 
            :key="item.value"
            :label="item.label"
            :value="item.value"> <!--  -->
          </el-option>
        </el-select>
      </el-col>

      <!-- 搜索 -->
      <el-col :span="6">
        <el-select v-model="value1" placeholder="请下拉" filterable ><!-- filterable:搜索 -->
          <el-option
            v-for="item in options" 
            :key="item.value"
            :label="item.label"
            :value="item.value"> <!--  -->
          </el-option>
        </el-select>
      </el-col>

    </el-row>

  </div>
</template>

<script>
  export default {
    name: "Select",
    data() {
      return {
        value1:'',
        value2:'',
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        },{
          value: '选项6',
          label: '啤酒炸鸡'
        }],
      }
    },
  }
</script>

<style scope>

</style>